/*
 * @Author: liyongxuan
 * @Date: 2018-1-10 10:37:42
 * @Last Modified by: liyongxuan
 * @Last Modified time: 2018-1-10 10:37:42
 * @description：项目管理-拟投资-项目详情编辑头部
 */
<template>
    <div>
        <div class="ca-align-right ca-head-fixed" v-if="isAdd">
            <el-button type="primary" @click="checkForm('form')">保存</el-button>
            <el-button  @click="exit">退出</el-button>
        </div>
        <el-form ref="form" label-width="100px" :rules="rules" :model="headerDataEdit">
            <div class="header">
                <div class="header__photo">
                    <div class="csLogoImgEdit">
                        <csLogoImg :item="headerDataEdit" @getId="getId"></csLogoImg>
                    </div>
                </div>
                <div class="header__body">
                    <el-row v-if="itemId !== '-1'&&showBtn">
                      <el-col :span="4" class="float-right">
                            <el-button size="small" type="primary" @click="checkForm">保存</el-button>
                            <el-button size="small" @click="cancel">取消</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="项目全称" prop="itemFullname">
                                <el-input type="text" :maxlength="100" v-model="headerDataEdit.itemFullname"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="项目经理" label-width="130px">
                            <el-select :clearable="true" v-model="myProManage" class="width100" placeholder="请选择">
                                <el-option v-for="(item,index) in initView.userList" :key="index" :label="item.userName" :value="item.id">
                                </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="项目简称" prop="itemName">
                                <el-input type="text" :maxlength="100" v-model="headerDataEdit.itemName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="行业" prop="itemIndustryEntity" label-width="130px">
                                <el-select v-model="headerDataEdit.itemIndustryEntity" class="width100" placeholder="请选择">
                                    <el-option v-for="item in initView.industry" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="拟投资规模" prop="investAmount">
                                <el-input type="number" :maxlength="20" v-model="headerDataEdit.investAmount">
                                    <template slot="append">万元</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="fundsName" label-width="130px">
                                <el-select v-model="myQuasiInvestmentFund" style="display:inline-table;white-space:normal" id="width100" class="width100" multiple placeholder="请选择">
                                    <el-option v-for="(item,index) in initView.fundList" :key="index" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div>
                <el-row>
                  <el-col :span="24">
                      <el-form-item label="拟退出方式：">
                          <el-checkbox-group v-model="headerDataEdit.exitEntityList">
                                <el-checkbox :label="item.id" v-for="item in initView.itemExit" :key="item.id" :value="item.name">{{item.name}}
                                </el-checkbox>
                          </el-checkbox-group>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="项目介绍：">
                            <el-input type="textarea" :maxlength="3000" v-model="headerDataEdit.itemInfo" :rows="2">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <ksProjectTeam :userList="initView.userList" v-model="myProjectTeamUsers"></ksProjectTeam>
                    </el-col>
                </el-row>                
            </div>
        </el-form>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { addRemind } from '__service/utils';
    export default {
        data() {
            var validateNumber = (rule, value, callback) => {
                var reg = /^\d{1,10}(\.\d{1,6})?$/;
                if (value !== '' && value && !reg.test(value)) {
                    callback(new Error('数字范围在小数点前十位,小数点后六位'));
                } else {
                    callback();
                }
            };
            return {
                fundsName: '拟投资基金',
                value: '',
                itemExit: [],
                myQuasiInvestmentFund: this.quasiInvestmentFund,//拟投资基金
                myProManage: this.proManage,//项目经理
                myProjectTeamUsers: this.projectTeamUsers,
                rules: {
                    itemFullname: [{ required: true, message: '请输入项目全称', trigger: 'blur' }],//项目全称
                    itemName: [{ required: true, message: '请输入项目简称', trigger: 'blur' }],//项目简称
                    itemIndustryEntity: [{ required: true, message: '请选择行业', trigger: 'change' }],//行业
                    investAmount: [{ validator: validateNumber, trigger: 'blur' }],
                },
                initView: {
                    map: JSON.stringify(this.$store.state),
                    prostatus: this.$store.state.user.dictionaryMap.prostatus,//项目轮次
                    industry: this.$store.state.user.dictionaryMap.industry,//行业
                    itemExit: this.$store.state.user.dictionaryMap.itemExit,//拟退出方式
                    userList: this.$store.state.user.department.userEntityList,//角色
                    fundList: [],//基金下拉列表
                }
            }
        },
        watch: {
            // 拟投资基金
            myQuasiInvestmentFund: {
                handler: function (val) {
                    this.$emit('getMyQuasiInvestmentFund',val)
                },
                deep: true
            },
            quasiInvestmentFund: {
              handler: function (val) {
                this.myQuasiInvestmentFund = val;
              },
              deep: true
            },
            // 项目经理
            myProManage: {
                handler: function (val) {
                    this.$emit('getMyProManage',val)
                },
                deep: true
            },
            proManage: {
              handler: function (val) {
                this.myProManage = val;
              },
              deep: true
            },
            // 项目组成员
            myProjectTeamUsers: {
                handler: function (val) {
                    this.$emit('getMyProjectTeamUsers',val)
                },
                deep: true
            },
            projectTeamUsers: {
              handler: function (val) {
                this.myProjectTeamUsers = val;
              },
              deep: true
            }
        },
        props: {
            headerDataEdit: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            itemId: {
                type: String,
                default: ''
            },
            // 项目经理
            proManage: {
                type: String,
                default: function () {
                    return ''
                }
            },
            // 拟投资基金
            quasiInvestmentFund: {
                type: Array,
                default: function () {
                    return []
                }
            },
            projectTeamUsers: {
                type: Array,
                default: function () {
                    return []
                }
            },
            showBtn: {
                type: Boolean,
                default: true
            },
            isAdd: {
                type: Boolean,
                default: false
            },
        },
        mounted() {
          if (!this.FOF) {
            this.fundsName = '拟设立基金'
          }
            this.getItemQuasiEntityPre()
        },
        methods: {
            // 新建拟投资项目前获取基础数据
            async getItemQuasiEntityPre() {
                const {resCode,data} = await apiHttp(api.ITEM_QUASI_ENTITY_PRE)
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.initView.fundList = data.fundList
                }
            },
            // 保存按钮
            async save() {
                this.headerDataEdit.quasiUserRelEntityList = []
                // 项目经理
                if (this.myProManage !== '' && this.myProManage !== null) {
                    this.headerDataEdit.quasiUserRelEntityList.push({userId: this.myProManage,type: 1,groupDate: ''})
                }
                // 项目组成员
                if (this.myProjectTeamUsers.length > 0) {
                    this.myProjectTeamUsers.map(u => {
                        u.userId.map(i => {
                            this.headerDataEdit.quasiUserRelEntityList.push({
                                groupDate: u.groupDate,
                                userId: i,
                                type: 2
                            })
                        })
                    })
                }
                // 拟投资基金
                if (this.myQuasiInvestmentFund.length > 0) {
                    this.headerDataEdit.itemRelEntityList = []
                    this.myQuasiInvestmentFund.map(item => {
                        this.headerDataEdit.itemRelEntityList.push({dataId: item, type: 3})
                    })
                }
                this.headerDataEdit.itemIndustryEntity = [this.headerDataEdit.itemIndustryEntity]//行业
                const {resCode} = await apiHttp(api.PUT_ITEM_QUASI_ENTITY_TOP,this.headerDataEdit)
                if (resCode === STATUS_HTTP_SUCCESS) {
                    // 添加小红点
                    await addRemind({
                        dataId: this.itemId || '', // 业务id
                        dataTab: 0, // tab页顺序 head 也为0
                        dataType: 1, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                    });
                    // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                    this.$root.Dot.$emit('getDotList');
                    this.$message({message: '保存成功',center: true,type: 'success'})
                    this.$emit('close')
                }
            },
            // 表单验证
            checkForm() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if (this.isAdd) {
                            this.$emit('save')
                        } else {
                            this.save()
                        }
                    } else {
                        return false;
                    }
                });
            },
            // 取消按钮
            cancel() {
                this.$emit('close')
            },
            // 退出按钮
            exit() {
                this.$router.push({name: 'pre-investment-project-list'})
            },
            // 上传logo的id
            getId(val) {
                this.headerDataEdit.itemImg = val
            }
        },
        components: {
            ksProjectTeam: require('./projectTeam'),//项目成员组件
            csLogoImg: require('__components/logo-img/edit')//logo
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.float-right{
    float: right;
}

.csLogoImgEdit {
  text-align: center;
  width: 208px;
  height: 147px;
//   border: 1px solid #ccc;
  padding-top: 15px;
  margin-bottom: 25px;
}

.header {
  display: flex;
  height: auto;
}

.header__photo {
  display: flex;
  height: auto;
  justify-content: center;
  margin-right: 20px;
}

.header__body {
  flex: 1;
}
.width100{
    width: 100%
}
</style>
